<script setup>
import { getParamList } from '/@/api/product';
const props = defineProps({
	modelValue: {
		type: Array,
		default: () => [],
	},
});
const emit = defineEmits(['update:modelValue']);
const selectedIds = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit('update:modelValue', val);
	},
});
const options = ref([]);
const loading = ref(false);
//远程搜索
async function remoteMethod(query) {
	try {
		let params = {
			type: null,
			current: 1,
			pageSize: 99,
			status: null,
			name: query === ' ' ? null : query,
		};
		loading.value = true;
		let res = await getParamList(params);
		loading.value = false;
		if (res.code !== 200) return;
		options.value = res.data.data;
	} catch (error) {
		loading.value = false;
	}
}
onMounted(() => {
	remoteMethod('');
});
</script>
<template>
	<div class="MulParamsSelector">
		<el-select
			v-model="selectedIds"
			multiple
			filterable
			remote
			reserve-keyword
			placeholder="请输入关键词"
			:remote-method="remoteMethod"
			:loading="loading"
			clearable
		>
			<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
		</el-select>
	</div>
</template>
